<template>
  <view class="form-main1">
    <view class="part1">
      <view class="row-wrapper"> 
        <view class="right-part">
          <view class="row-name">房源名称</view>
          <view class="input-wrapper">
            <view class="uni-input">{{item&&item.title}}</view>
            <view class="arrow"></view>
          </view>
        </view>
        <view class="left-part">
          <view class="row-name">审核状态</view>
          <view class="input-wrapper">
            <view class="uni-input">{{status}}</view>
            <view class="arrow"></view>
          </view>
        </view>
      </view>
      <view class="row-wrapper">
        <view class="left-part">
          <view class="row-name">房源状态</view>
          <view class="input-wrapper">
            <view class="uni-input">{{type}}</view>
            <view class="arrow"></view>
          </view>
        </view>
        <view class="right-part">
          <view class="row-name">用途</view>
          <view class="input-wrapper">
            <view class="uni-input">{{item&&item.house_purpose}}</view>
            <view class="arrow"></view>
          </view>
        </view>
      </view>

      <view class="row-wrapper">
        <view class="left-part">
          <view class="row-name">楼盘名称</view>
          <view class="input-wrapper">
            <view class="uni-input">{{item&&item.build.title}}</view>
          </view>
        </view>
        <view class="right-part">
          <view class="row-name">朝向</view>
          <view class="input-wrapper">
            <view class="uni-input">{{item&&item.house_direction}}</view>
          </view>
        </view>
      </view>

      <view class="row-wrapper">
        <view class="left-part">
          <view class="row-name">楼层</view>
          <view class="input-wrapper">
            <view class="uni-input">{{item&&item.house_floor}}/{{item&&item.build.build_floor}}</view>
          </view>
        </view>
        <view class="right-part">
          <view class="row-name">房号</view>
          <view class="input-wrapper">
            <view class="uni-input">{{item&&item.house_number}}</view>
          </view>
        </view>
      </view>

      <view class="row-wrapper" v-show="item.rent_status=='已售'||item.rent_status=='在售'||item.rent_status=='租售'">
        <view class="left-part">
          <view class="row-name">售价</view>
          <view class="input-wrapper">
            <view class="uni-input">{{numtoW(item&&item.house_sell_price)}}</view>
          </view>
        </view>
        <view class="left-part">
          <view class="row-name">单价</view>
          <view class="input-wrapper">
            <view class="uni-input">{{numtoW(item&&item.house_sell_price_m)}}元/㎡</view>
          </view>
        </view>
      </view>
      <view class="row-wrapper" v-show="item.rent_status=='已租'||item.rent_status=='在租'||item.rent_status=='租售'">
        <view class="left-part">
          <view class="row-name">租价</view>
          <view class="input-wrapper">
            <view class="uni-input">{{numtoW(item&&item.house_price)}}/月</view>
          </view>
        </view>
        <view class="left-part">
          <view class="row-name">单价</view>
          <view class="input-wrapper">
            <view class="uni-input">{{numtoW(item&&item.house_price_m)}}元/㎡</view>
          </view>
        </view>
      </view>
      <view class="row-wrapper">
        <view class="left-part">
          <view class="row-name">户型 </view>
          <view class="input-wrapper">
            <view class="uni-input">{{item&&item.room_hall}}</view>
          </view>
        </view>
        <view class="right-part">
          <view class="row-name">面积</view>
          <view class="input-wrapper">
            <view class="uni-input">{{item&&item.house_area}}㎡</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {

      };
    },
    methods: {
      numtoW(num) {
        if (num > 10000) {
          return (num / 10000).toFixed(2) + '万'
        } else {
          return num
        }
      },
    },
    props: ['item'],
    computed: {
      status(){
         if(this.item.status==0){
           return '未审核'
         }else if(this.item.status==1){
           return '已审核'
         }else if(this.item.status==2){
           return '已驳回'
         }else{
           return this.item.status
         }
      },
      type() {
        if (this.item.house_sell_type == 1) {
          return '租'
        } else if (this.item.house_sell_type == 2) {
          return '售'
        } else {
          return '租售'
        }
      },
      price() {
        if (this.item.house_sell_type == 1) {
          return this.item.house_price
        } else {
          return this.item.house_sell_price
        }
      },
      price_m() {
        if (this.item.house_sell_type == 1) {
          return this.item.house_price_m
        } else {
          return this.item.house_sell_price_m
        }
      },
    }
  }
</script>

<style lang="scss">
  @import "../assets/styles/global";
  /*@import "src/uview-ui/common/demo.scss";*/
  @import "@/uview-ui/index.scss";

  .form-main1,
  .form-main2 {
    margin-bottom: 20px;
    width: 686rpx;
    background-color: #ffffff;
    border-top-left-radius: 8rpx;
    border-top-right-radius: 8rpx;
    padding: 30rpx;
    @include bottomGreyBorder;
    border-bottom-color: $blueBorderColor;
    border-width: 4rpx;

    .part1 {
      width: 100%;
      border-radius: 8rpx;
      flex-direction: column;
      display: flex;

      .row-wrapper {
        width: 100%;
        height: 150rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left-part,
        .right-part,
        .whole-part {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: 280rpx;
          height: 112rpx;
          padding-bottom: 14rpx;
          @include bottomGreyBorder;

          .row-name {
            max-width: 250rpx;
            @include ellipsis;
            height: 48rpx;
            font-size: 24rpx;
            line-height: 48rpx;
            color: #969799;
            /*margin-bottom: 8rpx;*/
          }

          .input-wrapper {
            position: relative;
            height: 48rpx;
            width: 100%;

            .uni-input {
              width: 100%;
              font-size: 28rpx;
              line-height: 48rpx;
              color: #3d444c;
              /*color: #969799;*/
              @include ellipsis;

            }

            .triangle-down-arrow {
              position: absolute;
              right: 0;
              top: 50%;
              margin-top: -6rpx;
              width: 12rpx;
              height: 12rpx;
              background-image: url("@/static/images/record/triangle-arrow@3x.png");
              @include contain-no-repeat-center;
            }
          }
        }

        .whole-part {
          width: 622rpx;
          height: 112rpx;
          @include bottomGreyBorder;

        }
      }

      .record-progress {
        width: 609rpx;
        height: 114rpx;
        border: solid 2rpx #ebedf0;
        @include center;

        .status-icon-text {
          width: 170rpx;
          display: flex;
          @include center;
          flex-direction: column;

          .icon {
            height: 38rpx;
            width: 38rpx;
            @include cover-no-repeat-center;
          }

          .text {
            width: 100%;
            @include ellipsis;
            height: 48rpx;
            font-size: 24rpx;
            line-height: 48rpx;
            letter-spacing: 0rpx;
            color: #ba9d61;
            text-align: center;
          }

          .inactive-text {
            color: #969799;
          }

        }

        .right-arrow {
          height: 30rpx;
          width: 30rpx;
          @include contain-no-repeat-center;
          /*background-color: #D8D8D8;*/
        }

        .active-right-arrow {
          background-image: url("@/static/images/record/right-arrow@3x.png");

        }

        .inactive-right-arrow {
          background-image: url("@/static/images/record/inactive-right-arrow@3x.png");

        }
      }
    }



    .part1,
    .part2 {
      .row {
        width: 100%;
        height: 104rpx;
        @include bottomGreyBorder;
        display: flex;
        justify-content: space-between;

        .row-name-left {
          height: 100%;
          align-items: center;
          display: flex;
          width: 190rpx;
          font-size: 28rpx;
        }

        .right-part {
          color: #bdc4ce;
          height: 100%;
          width: 450rpx;
          /*background-color: #D8D8D8;*/
          display: flex;
          align-items: center;

          .uni-input {
            width: 430rpx;
            height: 48rpx;
            font-size: 28rpx;
            color: #969799;

          }

          .input-wrapper {
            width: 100%;

            .uni-input {
              max-width: 80rpx;
              @include ellipsis;
              display: flex;
              align-items: center;
            }
          }
        }
      }

      .double-height-row {
        height: 212rpx;
        display: flex;
        flex-direction: column;
        width: 100%;

        .input-wrapper {
          width: 120rpx !important;
          margin-left: 90rpx;
          display: flex;
          align-items: center;

          &:first-child {
            margin-left: 0rpx;

          }

        }
      }

    }

    .part2 {
      margin-top: 48rpx;

      .part2-title {
        width: 100%;
        height: 48rpx;
        font-weight: bold;
        font-size: 28rpx;
        line-height: 48rpx;
        color: #3d444c;
        margin-bottom: 24rpx;
      }

      .part2-desc {
        width: 442rpx;
        height: 48rpx;
        font-size: 24rpx;
        line-height: 48rpx;
        letter-spacing: 0rpx;
        color: #969799;
      }

      .blue-wide-button {
        width: 448rpx;
        margin-top: 48rpx;
      }

    }

  }
</style>
